/**
 * @file 订单标签配置
 * @author liuying
 * @date 2021-07-30 15:24:11
 */

layui.define(['element', 'layer', 'form', 'upload', '$http'], function (exports) {
    let $ = layui.$;
    let form = layui.form;
    let $http = layui.$http;
    let element = layui.element;
    let layer = layui.layer;
    let laydate = layui.laydate;
    let upload = layui.upload;
    let CONF_BASE_URL = OMS_BASE_URL + '/tips/config';
    let timestamp = new Date().getTime();

    let listSaveTips = new Array();
    let delListId = new Array();
    // 页面初始化展示以存在的图片列表
    if (json.list && json.list.length > 0) {
        let html = ""
        json.list.forEach(x => {
            html += '<div style="float: left;">' +
                '<img src="' + x.src + '" class="layui-upload-img"' +
                ' style="width: 100px;height: 100px;margin: 5px;border: #00a0e9 1px solid;position: relative;">' +
                '<i class="layui-icon layui-icon-close-fill btn-delete" tips-id="' + x.id + '" tips-url="' + x.src + '" ></i></div>'
        })
        $('#tips').append(html)
    }
    /**
     * 图片上传
     */
    let indexUploadImags

    function uploaderImage(elemId) {
        upload.render({
            elem: '#upload'
            , url: CONF_BASE_URL + '/uploader?timestamp=' + timestamp + '&elemId=' + elemId //此处配置你自己的上传接口即可
            , exts: 'jpg|png|jpeg'
            , acceptMime: 'image/*'
            , accept: 'images'
            , size: 5120
            , drag: true
            , auto: false
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = function (e) {
                        var image = new Image()
                        image.src = e.target.result
                        image.onload = function (e) {
                            if (image.width !== 816 || image.height !== 540) {
                                layer.msg("请上传宽:816px,高540px的图片!")
                            } else {
                                obj.upload(index, file)
                            }
                        }
                    }
                });

            }, done: function (res) {
                if (res.statusBool) {
                    let data = res.data;
                    let item = {
                        servCategId: json.servCategId,
                        categOneId: json.categOneId,
                        categId: json.categId,
                        src: data
                    }
                    $('#tips').append('<div style="float: left;"><img src="' + data + '" class="layui-upload-img"' +
                        ' style="width: 100px;height: 100px;margin: 5px;border: #00a0e9 1px solid;position: relative;">' +
                        '<i class="layui-icon layui-icon-close-fill btn-delete " tips-id="" tips-url="' + data + '" ></i></div>')
                    element.init();
                    listSaveTips.push(item)
                } else {
                    layer.msg(res.message)
                }
                form.render();
                layui.layer.close(indexUploadImags);
            }
        });
        form.render();
    }

    /**
     * 保存
     */
    form.on('submit(tips-detail-submit)', function (data) {
        let url = CONF_BASE_URL + '/addModify.action'
        if (listSaveTips.length < 0 && delListId.length < 0) {
            layer.msg("请上传或删除图片！", {icon: 2});
            return false;
        }
        let pram = {
            servCategId: data.field.servCategId,
            categOneId: data.field.categOneId,
            categId: data.field.categId,
            delListId: delListId,
            tipsConfigList: listSaveTips
        }
        $("#tips-detail-submit").addClass("layui-btn layui-btn-disabled").prop("disabled", true);
        $('#tips-detail-submit').attr("disabled", true);
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: url,
            data: JSON.stringify(pram),
            dataType: 'json',
            success: function (res) {
                if (res.status === 200) {
                    layer.msg('保存成功!', {icon: 1});
                } else {
                    layer.msg(res.message, {icon: 2});
                }
                $('#tips-detail-submit').attr("disabled", false);
                $("#tips-detail-submit").removeClass("layui-btn-disabled").prop("disabled", false);
            }
        });
    });
    /**
     * 删除
     */
    $(document).on("click", ".btn-delete", function () {
        let _this = $(this)
        let parent = _this.parent()
        let src = _this.attr("tips-url");
        let id = _this.attr("tips-id");
        // 需要删除以上传的图片ID
        if (id !== null || id !== '') {
            delListId.push(id)
        } else {
            // 还未保存的图片可以直接前端处理
            listSaveTips.splice(listSaveTips.findIndex(item => item.src === src), 1)
        }
        parent.remove();
    })

    // 初始化图片上传组件
    uploaderImage("tips");
    exports('oms_conf_tips_detail');
});
